<template>
  <div class="page nav-sun">
    <ul class="ul1">
      导航
      <li class="li1"><a href="#">一级导航</a></li>
      <li class="li1"><a href="#">一级导航</a></li>
      <li class="li1"><a href="#">一级导航</a></li>
      <li class="li1"><a href="#">一级导航</a></li>
      <li class="li1"><a href="#">一级导航</a></li>
      <li class="li1"><a href="#">一级导航</a></li>
    </ul>
  </div>
</template>
<script setup>
import {} from "vue";
</script>
<style lang="scss">
.nav-sun {
  ul a {
    color: #666666;
    text-decoration: none;
  }
  ul,
  li {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    list-style: none;
    background-color: white;
    border-bottom-right-radius: 100%;
    border-color: #dddddd;
    border-style: solid;
  }
  ul.ul1 {
    height: 100px;
    width: 100px;
    border-width: 0 2px 0 0;
    padding: 0;
  }
  ul.ul1 > li {
    width: 200px;
    height: 200px;
    padding: 5px 10px 5px 0;
    border-width: 1px 2px 0 0;
    z-index: -1;
    text-align: right;
    transition: transform .3s linear, background-color .15s linear;
    transform-origin: 0 0;
    transform: translate(-100px, -100px);
  }
  ul.ul1:hover > li {
    transform: translateX(0px);
  }
  ul.ul1 > li:hover {
    background-color: #eeeeee;
  }
  ul.ul1:hover > li:nth-child(2) {
    transform: rotate(15deg);
  }
  ul.ul1:hover > li:nth-child(3) {
    transform: rotate(30deg);
  }
  ul.ul1:hover > li:nth-child(4) {
    transform: rotate(45deg);
  }
  ul.ul1:hover > li:nth-child(5) {
    transform: rotate(60deg);
  }
  ul.ul1:hover > li:nth-child(6) {
    transform: rotate(75deg);
  }
}
</style>